<!-- 底部组件(播放音乐的组件audio) -->
<template>
  <div class="footmusic">
    <div class="footer-left" @click="updateDetailShow">
      <img :src="playList[playListIndex].al.picUrl" alt="" />
      <div>
        <p>{{ playList[playListIndex].al.name }}</p>
        <span>横滑切换上下首哦</span>
      </div>
    </div>
    <div class="footer-right">
      <svg
        class="icon position"
        aria-hidden="true"
        @click="play"
        v-if="isbtnShow"
      >
        <use xlink:href="#icon-bofang"></use>
      </svg>
      <svg class="icon position" aria-hidden="true" @click="play" v-else>
        <use xlink:href="#icon-bofang2"></use>
      </svg>
      <svg class="icon position" aria-hidden="true">
        <use xlink:href="#icon-liebiao"></use>
      </svg>
    </div>
    <audio
      ref="audio"
      :src="`https://music.163.com/song/media/outer/url?id=${playList[playListIndex].id}.mp3`"
    ></audio>
    <van-popup
      v-model:show="detailShow"
      position="right"
      :style="{ height: '100%', width: '100%' }"
    >
      <MusicDetail :musicList="playList[playListIndex]" />
    </van-popup>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import MusicDetail from './MusicDetail.vue'
export default {
  components: { MusicDetail },
  data() {
    return {}
  },
  computed: {
    ...mapState(['playList', 'playListIndex', 'isbtnShow', 'detailShow']),
  },
  methods: {
    // 播放
    play() {
      // 判断音乐是否播放
      if (this.$refs.audio.paused) {
        this.$refs.audio.play()
        this.updateIsbtnShow(false)
      } else {
        this.$refs.audio.pause()
        this.updateIsbtnShow(true)
      }
    },
    ...mapMutations(['updateIsbtnShow', 'updateDetailShow']),
  },
  mounted() {
    // console.log(this.$refs)
  },
  watch: {
    playListIndex() {
      // 监听音乐列表的下标，改变就直接自动播放音乐
      this.$refs.audio.autoplay = true
      if (this.$refs.audio.paused) {
        // 如果是暂停状态，改变图标
        this.updateIsbtnShow(false)
      }
    },
    playList() {
      if (this.isbtnShow) {
        this.$refs.audio.autoplay = true
        this.updateIsbtnShow(false)
      }
    },
  },
}
</script>

<style lang="less" scoped>
.footmusic {
  width: 95%;
  height: 70px;
  background-color: #fff;
  position: fixed;
  bottom: 60px;
  border-top: 1px solid #999;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-radius: 10px;
  .footer-left {
    width: 80%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
  }
  .footer-right {
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .icon {
      width: 30px;
      height: 30px;
    }
  }
}
</style>
